<template>
  <resource-table :table-columns="tableColumns" @queryTable="queryTable">
    <template #headerRight="props">
      <div>
        行政区划：
        <el-select v-model="props.queryParameters.region" placeholder="请选择">
          <el-option
            v-for="item in regions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div>
        名称1：
        <el-input
          placeholder="请输入名称，支持模糊查询"
          style="width: 200px"
          v-model="props.queryParameters.name"
        ></el-input>
      </div>
    </template>
  </resource-table>
</template>

<script>
export default {
  name: "ResourceTableHeaderRight",
  data() {
    return {
      regions: [
        {
          value: "510000",
          label: "四川省",
        },
        {
          value: "130000",
          label: "河北省",
        },
      ],
      tableColumns: [
        {
          prop: "date",
          label: "日期",
        },
        {
          prop: "name",
          label: "姓名",
        },
        {
          prop: "address",
          label: "地址",
        },
        {
          prop: "money",
          label: "金额",
          align: "right",
        },
      ],
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          money: 432,
          status: false,
          topping: true,
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
          money: 432,
          status: false,
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
          money: 432,
          status: false,
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
          money: 432,
          status: true,
        },
      ],
    };
  },
  methods: {
    queryTable: function (queryParameters, callback) {
      callback(this.tableData);
    },
  },
};
</script>

<style scoped lang="scss"></style>
